<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="distribution-centre-color" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{navTitle}}</block>
		</cu-custom>
		<view class="set-mall" v-if="types=='combo'">
			<view class="set-item" v-for="(item,index) in showList" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}&type=combo`">
				<view class="top">
					<view>{{item.name}}</view>
					<view class="">
						<view class="">
							<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
							<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
							<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
							<text class="text-colorP" v-if="item.integral>0">积分</text>
							<text class="text-price text-gray">{{item.ot_price}}</text>
						</view>
						<view class="">
							邀好友赚{{item.max_money}}元
						</view>
					</view>
				</view>
				<view class="bottom" v-if="item.product.length>0">
					<view class="bottom-item" v-for="(pro,p) in item.product" :key="p">
						<image :src="pro.image+'?x-oss-process=image/resize,m_fill,h_140,w_140'" mode=""></image>
						<view class="text-cut">{{pro.product_name}}</view>
						<view class="">
							<text class='text-price text-colorP'>123</text>
							<text class="">x20份</text>
						</view>
						<text class="left-radius"></text>
						<text class="right-radius"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="combo-list" v-if="types=='thisOne'">
			<view class="tui-extend-item" v-for="(item,index) in showList" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}`">
				<image class="image" :src="item.image+'?x-oss-process=image/resize,m_fill,h_280,w_340'" lazy-load mode=""></image>
				<view class="info">
					<view>{{item.product_name}}</view>
					<view class="">
						<view class="">
							<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
							<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
							<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
							<text class="text-colorP" v-if="item.integral>0">积分</text>
							<text class="text-price text-gray">{{item.ot_price}}</text>
						</view>
						<view class="">
							<view class="">
								<text>邀好友赚</text>
								<text>{{item.max_money}}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了</tui-divider>
		<no-content :showType="'search'" v-if='noContentShow' :tips="'暂时没有此类商品~'"></no-content>
	</view>
</template>

<script>
	import noContent from '../component/noContent.vue'
	export default {
		components: {
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				navTitle: '',
				types: '',
				showList: [],
				page: 1,
				lastPage: '',
				noMore: false,
				noContentShow: false
			}
		},
		onReachBottom() {
			if (!this.lastPage) return
			if (this.page > this.lastPage && this.showList.length > 0) {
				this.noMore = true
				return
			}

			switch (this.types) {
				case 'combo':
					this.getThisOne()
					break
				case 'thisOne':
					this.getTour()
					break
			}
		},
		onLoad(options) {
			this.types = options.types
			switch (options.types) {
				case 'combo':
					this.navTitle = '套餐权益'
					this.getThisOne()
					break
				case 'thisOne':
					this.navTitle = '经典单品'
					this.getTour()
					break
			}
		},
		methods: {
			// 跳转
			nav(e) {
				// 处理连锁商家的方法
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url,
						fail() {
							uni.switchTab({
								url: url
							})
						}
					})
				}
			},
			getThisOne() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Combo/get_combo_list',
					methods: 'GET',
					data: {
						page: me.page,
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.product_data
							if (res.data.data.totalNum == 0) {
								me.noContentShow = true
								return
							}
							if (list.length > 0) {
								me.showList = me.showList.concat(list)
								me.page++
								me.lastPage = res.data.data.pageCount
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getTour() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Product/get_distribution_product_order',
					methods: 'POST',
					data: {
						industry_id: 6,
						page: me.page,
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.totalNum == 0) {
								me.noContentShow = true
								return
							}
							var thisData = res.data.data.product_data
							me.showList = me.showList.concat(thisData)
							me.page++
							me.lastPage = res.data.data.pageCount
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	page{
		background: #fff;
		padding-top: 20rpx;
	}
</style>
<style scoped>
	.combo-list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #fff;
	}
	
	.set-mall {
		width: 100%;
		padding: 0 24rpx;
	}

	.set-mall .set-item:last-child {
		margin-bottom: 0;
	}

	.set-item {
		width: 100%;
		/* height: 483rpx; */
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(153, 153, 153, 0.4);
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.set-item .top {
		width: 100%;
		height: 178rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		border-bottom: solid 1rpx #efefef;
	}

	.set-item .top>view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 660rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.set-item .top>view:nth-child(2) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.set-item .top>view:nth-child(2)>view:nth-child(1)>text {
		font-weight: bold;
	}

	.set-item .top>view:nth-child(2)>view:nth-child(1)>text:last-child {
		text-decoration: line-through;
		margin-left: 10rpx;
		font-weight: normal;
		font-size: 24rpx
	}

	.set-item .top>view:nth-child(2)>view:nth-child(2) {
		height: 48rpx;
		padding: 0 10rpx;
		background-image: linear-gradient(90deg,
			#f8990b 0%,
			#f34930 100%);
		border-radius: 10rpx;
		color: #ffffff;
		line-height: 48rpx;
		font-size: 28rpx;
	}

	.set-item .bottom {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.set-item .bottom .bottom-item {
		width: 214rpx;
		height: 264rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fef5e6;
		border-radius: 4rpx;
		position: relative;
		margin-right: 10rpx;
	}

	.set-item .bottom .bottom-item:last-child {
		margin-right: 0 !important;
	}

	.set-item .bottom .bottom-item .left-radius {
		position: absolute;
		bottom: 50rpx;
		left: -8rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 100%;
		background: #fff;
	}

	.set-item .bottom .bottom-item .right-radius {
		position: absolute;
		bottom: 50rpx;
		right: -8rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 100%;
		background: #fff;
	}

	.set-item .bottom .bottom-item>image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 4rpx;
	}

	.set-item .bottom .bottom-item>view:nth-child(2) {
		max-width: 200rpx;
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		text-align: center;
		margin: 10rpx 0;

	}

	.set-item .bottom .bottom-item>view:nth-child(3) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.set-item .bottom .bottom-item>view:nth-child(3)>text:nth-child(1) {
		font-weight: bold;
	}

	.set-item .bottom .bottom-item>view:nth-child(3)>text:nth-child(2) {
		font-size: 22rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-left: 10rpx;
		line-height: 22rpx;

	}
	
	
	.tui-extend-item {
		width: 340rpx;
		height: 470rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
	}
	
	.tui-extend-item image {
		width: 340rpx;
		height: 280rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(153, 153, 153, 0.4);
	}
	
	.tui-extend-item .info {
		height: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx;
		box-sizing: border-box;
	}
	
	.tui-extend-item .info>view:nth-child(1) {
		font-size: 28rpx;
		color: #333333;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-width: 320rpx;
		font-weight: bold;
	}
	
	.tui-extend-item .info>view:nth-child(2)>view>text {
		font-weight: bold;
	}
	
	.tui-extend-item .info>view:nth-child(2)>view:nth-child(1)>text:last-child {
		text-decoration: line-through;
		margin-left: 10rpx;
		font-weight: normal;
		font-size: 24rpx
	}
	
	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2) {
		display: inline-block;
		height: 32rpx;
		border-radius: 4rpx;
	}
	
	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2)>view:nth-child(1) {
		border: solid 1rpx #f34930;
		background-color: #ffffff;
		border-radius: 4rpx;
		height: 100%;
		margin-top: 10rpx;
		display: flex;
	
	}
	
	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2)>view:nth-child(1)>text:nth-child(1) {
		display: inline-block;
		width: 100rpx;
		height: 100%;
		background-color: #f34930;
		border-radius: 4rpx 0rpx 0rpx 4rpx;
		font-size: 20rpx;
		color: #ffffff;
		text-align: center;
	}
	
	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2)>view:nth-child(1)>text:nth-child(2) {
		padding: 0 10rpx;
		line-height: 32rpx;
		color: #f34930;
		font-size: 20rpx;
	}
	
</style>
